<template>

  <div class="d-flex login-base-1 d-flex flex-column align-center justify-start" style="padding-top: 80px">
    <div class="d-flex flex-column align-center justify-center" style="width: 400px">
      <div class="d-flex align-end">
        <img :src="Logo" alt="logo" height="40">
        <div class="font-size-title-3 pl-4">IceSoft Admin</div>
      </div>
      <div class="font-size-body-1 pt-5" style="color: #808695">IceSoft 企业级中后台前端解决方案</div>
    </div>
    <div class="login-page d-flex flex-column justify-center align-center">
      <el-form
        ref="formRef"
        :model="api.form"
        :rules="rules"
        class="login-form"
        label-width="120px"
        status-icon
      >
        <i-xyz-transition :duration="'3'" :ease="'in-out'" :left="'1'" appear mode="out-in">
          <div v-if="api.form.accountType=='ACCOUNT'" :key="'ACCOUNT'">
            <el-form-item
              label-width="0"
              prop="username"
            >
              <el-input
                v-model.trim="api.form.username"
                :show-word-limit="false"
                autocomplete="username"
                clearable
                onfocus="this.removeAttribute('readonly');"
                :prefix-icon="User"
                placeholder="用户账号" />
            </el-form-item>

            <el-form-item
              label-width="0"
              label=""
              prop="password"
            >
              <el-input
                v-model="api.form.password"
                clearable
                placeholder="用户密码"
                show-password
                :prefix-icon="Lock"
                type="password" />
            </el-form-item>

            <el-form-item
              v-if="api.settingState.code"
              label=""
              label-width="0"
              prop="captcha"
            >
              <el-input
                v-model="api.form.captcha"
                class="login-captcha"
                clearable
                placeholder="验证码">
                <template #append>
                  <div
                    style="height: 30px"
                    @click="api.captchaImage()">
                    <div
                      v-if="!api.img.path"
                      v-loading="api.img.loading"
                      style="height: 30px;width: 130px"></div>
                    <img
                      v-if="api.img.path"
                      v-loading="api.img.loading"
                      :src="'data:image/png;base64,' +api.img.path"
                      alt="captcha"
                      height="30"
                      width="130">
                  </div>
                </template>
              </el-input>
            </el-form-item>

          </div>

          <div v-if="api.form.accountType == 'PHONE'" :key="'PHONE'">
            <el-form-item
              label=""
              label-width="0"
              prop="username"
            >
              <el-input
                v-model="api.form.username"
                clearable
                :prefix-icon="Iphone"
                placeholder="手机号" />
            </el-form-item>

            <el-form-item
              label=""
              label-width="0"
              prop="password"
            >
              <el-input
                v-model="api.form.password"
                autocomplete="new-password"
                clearable
                placeholder="短信验证码">
                <template #append>
                  <el-button
                    :disabled="api.smsState.timing!=60"
                    :loading="api.smsState.loading"
                    @click="api.sendSmsCode()">
                    {{ api.smsState.msg }}
                  </el-button>
                </template>
              </el-input>
            </el-form-item>

          </div>
          <div v-if="api.form.accountType == 'EMAIL'" :key="'EMAIL'">
            <el-form-item
              label=""
              label-width="0"
              prop="username"
            >
              <el-autocomplete
                v-model="api.form.username"
                :fetch-suggestions="querySearch"
                class="fill-width"
                clearable
                :prefix-icon="Message"
                placeholder="邮箱账号" />
            </el-form-item>

            <el-form-item
              label=""
              label-width="0"
              prop="password"
            >
              <el-input
                v-model="api.form.password"
                clearable
                placeholder="邮箱验证码">
                <template #append>
                  <el-button @click="api.sendMail()">发送验证码</el-button>
                </template>
              </el-input>
            </el-form-item>
          </div>
        </i-xyz-transition>

        <el-button
          :disabled="api.submitButton.disable"
          :loading="api.submitButton.loading"
          class="fill-width"
          type="primary"
          @click="submit">登录
        </el-button>

      </el-form>
      <div class="d-flex align-center fill-width pt-8" style="width: 320px">
        <div style="font-size: 14px;color: #808695" class="mr-4">其它登录方式</div>
        <el-space size="large">
          <el-tooltip
            content="账号登录"
            placement="bottom"
            effect="customized AuthAccount"
          >
            <img
              class="auth-item AuthAccount cursor-pointer"
              :class="{'active':api.form.accountType==='ACCOUNT'}"
              @click="api.changLoginType('ACCOUNT')"
              :src="AuthAccount"
              alt="AuthAccount"
              height="24">
          </el-tooltip>
          <el-tooltip
            effect="customized AuthPhone"
            content="手机号登录"
            placement="bottom"
          >
            <img
              class="auth-item AuthPhone cursor-pointer"
              :class="{'active':api.form.accountType==='PHONE'}"
              @click="api.changLoginType('PHONE')"
              :src="AuthPhone"
              alt="AuthPhone"
              height="24">
          </el-tooltip>
          <el-tooltip
            effect="customized AuthEmail"
            content="邮箱登录"
            placement="bottom"
          >
            <img
              class="auth-item AuthEmail cursor-pointer"
              :class="{'active':api.form.accountType==='EMAIL'}"
              @click="api.changLoginType('EMAIL')"
              :src="AuthEmail"
              alt="AuthEmail"
              height="24">
          </el-tooltip>
        </el-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { LoginApi } from "~/api/system/login/login.api";
import Logo from "~/assets/logo.png";
import { onMounted, reactive, ref } from "vue";
import { FormRules } from "element-plus";
import IXyzTransition from "~/icesoft/components/transitions/IXyzTransition.vue";
import { Iphone, Lock, Message, User } from "@element-plus/icons-vue";
import AuthPhone from "~/assets/auth_phone.svg";
import AuthAccount from "~/assets/auth_account.svg";
import AuthEmail from "~/assets/auth_email.svg";

const api = new LoginApi();
const formRef = ref();

const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入账号", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

onMounted(() => {
  api.captchaImage();
  window.localStorage.removeItem("token");
});

function querySearch(queryString: string, cb: any) {
  let mail = "";
  if (api.form.username.endsWith(".com")) {
    mail = api.form.username.substring(0, api.form.username.indexOf("@"));
  } else {
    mail = api.form.username;
  }
  cb([
    { value: mail + "@163.com" },
    { value: mail + "@126.com" },
    { value: mail + "@139.com" },
    { value: mail + "@189.com" },
    { value: mail + "@sohu.com" },
    { value: mail + "@aliyun.com" },
    { value: mail + "@hotmail.com" },
    { value: mail + "@yahoo.com" },
    { value: mail + "@msn.com" },
    { value: mail + "@mail.com" },
    { value: mail + "@qq.com" },
    { value: mail + "@sina.cn" },
    { value: mail + "@gmail.com" },
  ]);
}

async function submit() {
  const values = await formRef.value.validate();
  if (values) {
    api.login();
  }
}
</script>

<style lang="scss" scoped>
.login-base-1 {
  background-image: url('@/assets/login_bg.svg');
  background-color: #f5f7f9;
  height: 100vh;

  .auth-item {
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;

    &.active {

    }

    &.AuthPhone, &.AuthAccount {
      padding: 1.5px;
    }

    &:hover {

      &.AuthAccount {
        border-color: var(--el-color-primary);
      }

      &.AuthPhone {
        border-color: var(--el-color-warning);
      }

      &.AuthEmail {
        border-color: var(--el-color-success);
      }
    }

  }

  .login-page {
    background: rgba(var(--el-color-white), 0.1);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 24px;

    .login-form {
      width: 320px;

      .login-captcha {
        :deep(.el-input-group__append) {
          padding: 0;
        }
      }
    }
  }

}


</style>
